<script>
export default {
    props: {
        type:{
            type:String,
            required:true,
            default:'before'
        },
        fieldCfg:{
            type:Object,
            requried:true,
            default(){
                return {}
            },
        },
        after:{
            requried:true,
            default:null
        },
        before:{
            requried:true,
            default:null
        }
    },
    data() {
        return {
            dialogTableVisible:false,
        }
    },
    methods: {
        openTable(){
            this.dialogTableVisible = true
        }
    },
    computed:{
        data(){
            return this.type === 'before' ? this.before : this.after
        }
    }
}
</script>

<template>
    <div>
        <el-button type="text" @click="openTable">{{ data.length }}段工作经历</el-button>

        <el-dialog append-to-body title="工作经历" :visible.sync="dialogTableVisible">
            <el-table :data="data">
                <el-table-column property="companyName" label="公司名称">
                    <template v-slot="{ row }">
                        {{ row.companyName || '未填写' }}
                    </template>
                </el-table-column>
                <el-table-column property="beginDate" label="起始日期">
                    <template v-slot="{ row }">
                        {{ row.beginDate || '未填写' }}
                    </template>
                </el-table-column>
                <el-table-column property="endDate" label="结束日期">
                    <template v-slot="{ row }">
                        {{ row.endDate || '未填写' }}
                    </template>
                </el-table-column>
                <el-table-column property="salary" label="薪水">
                    <template v-slot="{ row }">
                        {{ row.salary || '未填写' }}
                    </template>
                </el-table-column>
                <el-table-column property="reason_leaving" label="离职原因">
                    <template v-slot="{ row }">
                        {{ row.reason_leaving || '未填写' }}
                    </template>
                </el-table-column>
                <el-table-column property="department" label="部门">
                    <template v-slot="{ row }">
                        {{ row.department || '未填写' }}
                    </template>
                </el-table-column>
                <el-table-column property="position" label="岗位">
                    <template v-slot="{ row }">
                        {{ row.position || '未填写' }}
                    </template>
                </el-table-column>
                <el-table-column property="company_telephone" label="公司电话">
                    <template v-slot="{ row }">
                        {{ row.company_telephone || '未填写' }}
                    </template>
                </el-table-column>
                <el-table-column property="jobDescription" label="工作内容">
                    <template v-slot="{ row }">
                        {{ row.jobDescription || '未填写' }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>